<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中台边缘设备检测</title>
    <link href="asset/css/bootstrap.min.css" rel="stylesheet">
    <script src="asset/js/jquery.min.js"></script>
    <script src="asset/js/bootstrap.min.js"></script>
    <script src="asset/layer/layer.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div class="container-fluid">
    <h2><p class="text-center">内网设备列表</p></h2>
    <h6><p class="text-right" style="color:red">请确保设备时间与互联网同步且为同一时区,通信耗时为负数,则表示该设备时间比本机快</p></h6>
    <div class="table-responsive">


        <form class="form-inline" id="testPort">
            <div class="form-group">
                <label class="sr-only" for="ip">外网IP</label>
                <input type="text" class="form-control" id="ip" placeholder="0.0.0.0">
            </div>
            <div class="form-group">
                <label class="sr-only" for="port">端口</label>
                <input type="text" class="form-control" id="port" placeholder="7001,7002,7003,7004,8001,8002,8003,8004">
            </div>

            <button type="button" class="btn btn-default" onclick="testPort()">http端口测试</button>
            <label class="radio-inline" id="testPortResult">
            </label>
            <button type="button" class="btn btn-success" onclick="LogClean()">日志清空</button>
        </form>
        <p></p>

        <ul id="myTab" class="nav nav-tabs">
            <li class="active"><a href="#online" data-toggle="tab">在线设备</a></li>
            <li><a href="#echarts" data-toggle="tab">统计图表</a></li>
            <li><a href="#offonline" data-toggle="tab">离线设备</a></li>
        </ul>
        <div id="TabContent" class="tab-content">
            <div class="tab-pane fade in active" id="online">
                <table class="table table-condensed">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>平台</th>
                        <th>内网IP</th>
                        <th>外网IP</th>
                        <th>CPU核心</th>
                        <th>最后通信时间</th>
                        <th>总计离线时间/分</th>
                        <th width="200px">内网通信耗时</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <div class="tab-pane fade" id="echarts"  style="min-height: 800px">
            </div>
            <div class="tab-pane fade" id="offonline">
                <table class="table table-condensed">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>平台</th>
                        <th>内网IP</th>
                        <th>外网IP</th>
                        <th>CPU核心</th>
                        <th>总计离线时间/分</th>
                        <th width="250px">最后通信时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    var sock = null;
    var wsuri = "ws://"+ window.location.hostname+":{{.HttpPort}}/ws";
    window.onload = function() {
        console.log("onload");
        sock = new WebSocket(wsuri);
        sock.onopen = function() {
            console.log("connected to " + wsuri);
            sock.send("connected");
        };
        sock.onclose = function(e) {
            console.log("connection closed (" + e.code + ")");
        };
        sock.onmessage = function(e) {
            //console.log("message received: " + e.data);
            var dataObj = eval('('+e.data+')');
            var onlinetpl = '';
            var offlinetpl = '';
            var i = 1;
            var j = 1;
            for(var index in dataObj){
                var _data = dataObj[index];
                var MacInfo = dataObj[index].MacInfo;

                if(_data.OffOnline == 0){ //在线
                    if(MacInfo.PUBLICIP == ""){
                        MacInfo.PUBLICIP = "<font color='red'>似乎不通?</font>"
                    }

                    var _class = 'success';

                    if(_data.isSelf == "1"){ //本机
                        _class = 'list-group-item-info';
                        if(MacInfo.PUBLICIP == ""){ //外网不通
                            $("#testPort").hide();
                        }else{
                            if($("#ip").val() == ''){
                                $("#ip").val(MacInfo.PUBLICIP)
                            }
                            $("#testPort").show();
                        }
                    }

                    onlinetpl += '<tr  class="'+_class+'">\n' +
                        '<th>'+i+'</th>\n' +
                        '<td>'+MacInfo.GOOS+'【'+MacInfo.GOARCH+'】/ '+MacInfo.HOSTNAME+'</td>\n' +
                        '<td>'+_data.ip+'</td>\n' +
                        '<td>'+MacInfo.PUBLICIP+'</td>\n' +
                        '<td>'+MacInfo.CPUNUM+'</td>\n' +
                        '<td>'+_data.timeFormat+'</td>\n' +
                        '<td>'+_data.FailNum+'</td>\n' +
                        '<td>'+_data.cost+'</td>\n' +
                        '</tr>';

                    onlinetpl += '<tr  class="">\n' +
                        '<th>&nbsp</th>\n' +
                        '<td colspan="8">&nbsp;'+MacInfo.TESTSPEED+'</td>\n' +
                        '</tr>';
                    i++
                }else{
                    if(MacInfo.PUBLICIP == ""){
                        MacInfo.PUBLICIP = "<font color='red'>似乎不通?</font>"
                    }
                    offlinetpl += '<tr  class="danger">\n' +
                        '<th>'+j+'</th>\n' +
                        '<td>'+MacInfo.GOOS+'【'+MacInfo.GOARCH+'】/ '+MacInfo.HOSTNAME+'</td>\n' +
                        '<td>'+_data.ip+'</td>\n' +
                        '<td>'+MacInfo.PUBLICIP+'</td>\n' +
                        '<td>'+MacInfo.CPUNUM+'</td>\n' +
                        '<td>'+_data.FailNum+'</td>\n' +
                        '<td>'+_data.timeFormat+'</td>\n' +
                        '</tr>';
                    j++
                }
                //console.log(MacInfo)
            }
            $('#online > table > tbody').html(onlinetpl);
            $('#offonline > table > tbody').html(offlinetpl);
        }
    };


    function testPort() {
        var ip = $('#ip').val();
        var port = $('#port').val();
        if(ip == '' || port == ''){
            layer.msg('ip和端口必须填写');
            return false;
        }
        setCookie("testPortIp",ip);
        setCookie("testPortPort",port);
        var index2 = layer.load(2);
            $.get("http://"+window.location.hostname+":{{.HttpPort}}/testPort?ip="+ip+"&ports="+port,function (res,status) {
                var tmp = "";
                for(var index in res){

                if (res[index].indexOf("打开") != -1){
                    tmp +="<span class=\"label label-success\">"+index+"："+res[index]+"</span>\n"
                }else if(res[index] == "占用"){
                    tmp +="<span class=\"label label-info\">"+index+"："+res[index]+"</span>\n"
                }
                else{
                    tmp +="<span class=\"label label-danger\">"+index+"："+res[index]+"</span>\n"
                }


                }
                $('#testPortResult').html(tmp);
                layer.close(index2);
        })

    }


    function LogClean() {
        var index2 = layer.load(2);
        $.get("./LogClean",function (res,status) {
            layer.close(index2);
            layer.msg('执行成功');
            setTimeout(function () {
                window.location = window.location;
            },3000)
        })
    }

    function testSpeed(publicip,ip) {
        if (publicip == ""){
            layer.msg('公网不通,无法测试');
            return false;
        }else{
            layer.confirm('确定要测试['+ip+']的网速?此项为下载估算，建议您多测试几次！', {icon: 3, title:'提示'}, function(index) {
                var index2 = layer.load(2);
                $.get("http://"+ip+":{{.HttpPort}}/testSpeed",function (res,status) {
                    $.get("http://"+window.location.hostname+":{{.HttpPort}}/setMac?ip="+ip+"&type=testSpeed&info="+res,function (res,status) {});
                    console.log(res);
                    layer.close(index2);
                    layer.msg(res);
                    layer.close(index);
                })
            })
        }
    }

    $(function () {
        var testPortIp = getCookie("testPortIp");
        var testPortPort = getCookie("testPortPort");
        if(testPortIp != ""){
            $('#ip').val(testPortIp);
        }
        if(testPortPort != ""){
            $('#port').val(testPortPort);
        }
    });

    function setCookie(name,value)
    {
        var Days = 30;
        var exp = new Date();
        exp.setTime(exp.getTime() + Days*24*60*60*1000);
        document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
    }

    function getCookie(name)
    {
        var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
        if(arr=document.cookie.match(reg))
            return unescape(arr[2]);
        else
            return null;
    }
</script>


<script type="text/javascript" src="asset/js/echarts.min.js"></script>
    <script type="text/javascript">
    var dom = document.getElementById("echarts");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    myChart.showLoading();
    $.get('./echarts', function (data) {
        data = eval('('+data+')');
        myChart.hideLoading();

        echarts.util.each(data.children, function (datum, index) {
           // index % 2 === 0 && (datum.collapsed = true);
        });

        myChart.setOption(option = {
            title : {
                text: '离线设备统计图表',
                subtext: '',
                x: 'center',
                align: 'right'
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        show: false
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series: [
                {
                    type: 'tree',
                    data: [data],
                    top: '1%',
                    left: '7%',
                    bottom: '1%',
                    right: '20%',
                    symbolSize: 7,
                    label: {
                        normal: {
                            position: 'left',
                            verticalAlign: 'middle',
                            align: 'right',
                            fontSize: 9
                        }
                    },
                    leaves: {
                        label: {
                            normal: {
                                position: 'right',
                                verticalAlign: 'middle',
                                align: 'left'
                            }
                        }
                    },
                    expandAndCollapse: true,
                    animationDuration: 550,
                    animationDurationUpdate: 750
                }
            ]
        });
    });
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
        myChart.resize();
    });

    $(window).resize(function() {
        myChart.resize();
    });
    </script>

</body>
</html>